<!DOCTYPE HTML>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>聚合数据天气应用</title>
    <style type="text/css">
        img {
            margin: 0 auto;
        }
        
        a {
            display: inline-block;
        }
        
        h1 {
            display: inline-block;
            vertical-align: 8px;
            color: orange;
        }
    </style>
    <style type="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></style>
</head>


<body ng-app="Weather">
    <div class="container" ng-controller="MainCtrl">
        <div class="row">
            <header class="col-xs-12 text-center">
                <!-- <h1>Free C<i class="wi wi-hail"></i>de Camp </h1> -->
                <a href="https://www.juhe.cn"><img src="https://www.juhe.cn/themes/v5/public/images/loginlogo.png" class="img-responsive"></a>
                <h1>天气应用</h1>
            </header>
        </div>
        <div class="col-xs-12 col-md-12">
            <div class="text-center status">
                <p>{{Data.today.city}}</p>
                <p>{{Data.today.week}}</p>
                <p>{{Data.today.date_y}}</p>
                <hr>
                <h4>今天天气</h4>
                <p>{{Data.today.weather}}</p>
                <p>{{Data.today.temperature}}</p>
                <p>湿度：{{Data.sk.humidity}}</p>
                <p>{{Data.today.wind}}</p>
                <p>穿衣指数：{{Data.today.dressing_index}}</p>
                <p>洗车指数：{{Data.today.wash_index}}</p>
                <p>旅行指数：{{Data.today.travel_index}}</p>
                <p>锻炼指数：{{Data.today.exercise_index}}</p>
                <p>紫外线指数：{{Data.today.uv_index}}</p>
            </div>
            <hr>
        </div>
        <h4 class="text-center">未来6天天气</h4>
        <div class="col-xs-4 col-md-2" ng-repeat="item in items">
            <div class="text-center status">
                <h5>{{item.week}}</h5>
                <p>{{item.temperature}}</p>
                <p>{{item.weather}}</p>
                <p>{{item.wind}}</p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('Weather', []);
        app.factory('WeatherApi', function ($http) {
            var obj = {};
            obj.getIP = function () {
                return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
            }
            obj.getCurrent = function (ip) {
                var api = "http://v.juhe.cn/weather/ip?format=1";
                var APPKey = "&key=dd0765af20d40a69cd17b8d0b1fb7aec&ip=";
                var cb = "&callback=JSON_CALLBACK";
                return $http.jsonp(api + APPKey + ip + cb);
            };
            return obj
        });

        app.controller('MainCtrl', function ($scope, WeatherApi) {
            $scope.Data = {};
            WeatherApi.getIP().success(function (data) {
                var ip = data.ip;
                WeatherApi.getCurrent(ip).success(function (data) {
                    $scope.Data = data.result;
                    $scope.items = data.result.future;
                    delete $scope.items[Object.keys($scope.items)[0]];
                });
            })
        });
    </script>


</body>

</html>